<template>
  <div class="gradencenter">
    <!-- 头部 -->
    <div class="header">
      <div><i class="iconfont icon-fanhui" @click="back"></i></div>
      <div class="header_box">
        <div class="image"><img src="../../asset/images/userimg.png" alt=""></div>
        <div class="header-text">
          <div>
            <span class="s1">Hi,{{memberInfo.nickName}}</span>
            <span class="s2">加入蜂收的第{{days}}天</span>
          </div>
          <div>
            <span class="s3">编号：{{memberInfo.mobileNo}}</span>
          </div>
        </div>
        <div>
            <i class="iconfont icon-zhuyeerweima"></i>
          </div>
      </div>
    </div>
    <!-- 中间 等级 -->
    <div class="content1_box">
      <div class="content1_box1">
        <div class="content1_box1_img"><img :src="level_img_src" alt=""></div>
        <div>{{post_name}}{{level}}</div>
      </div>
      <div class="progress">
        <van-progress
          :percentage="percentage"
          color="linear-gradient(to right, #e4b262, #f0592a)"
        />
      </div>
      <div class="vip_box">
        <div class="vip_box_d">
          <div class="vip_box_img1"><img src="../../asset/images/VIP@2x.png" alt=""></div>
          <div>同时接单</div>
          <div>{{orderNo}}单</div>
        </div>
        <div class="vip_box_d">
          <div class="vip_box_img1"><img :src="light_and_shade_func" alt=""></div>
          <div>功能内侧</div>
          <div>{{is_has_func}}</div>
        </div>
        <div class="vip_box_d">
          <div class="vip_box_img1"><img :src="light_and_shade_service" alt=""></div>
          <div>客服优先</div>
          <div>{{is_has_service}}</div>
        </div>
      </div>
      <div class="gradcenter" @click="goToMyGraden">等级中心<i class="iconfont icon-unie61f"></i></div>
    </div>
    <!-- 我的评价 -->
    <div class="content1_box content2_box">
      <div>我的评价</div>
      <div class="content2_box2">
        <div class="content2_box2_d1">超赞</div>
        <div class="content2_box2_d2">4.5</div>
        <div class="content2_box2_d3">
          <div class="content2_box2_d3_t"><hr></div>
          <div>服务评价</div>
          <div class="content2_box2_d3_t"><hr></div>
        </div>
      </div>
      <div class="btn_box">
        <button class="btn_box_btn1">服务态度好(12)</button>
        <button class="btn_box_btn2">真准时(2)</button>
        <button class="btn_box_btn3">价格公道(22)</button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { selectBeeUser, selectIntegralDetail } from 'services/beeUser';
// import { userInfo } from 'os';

export default {
  name: "gradencenter",
  data() {
    return {
      memberInfo: {},
      days: '',
      level_img_src: '',
      level_img_src_list: {
        blackIron: require('../../asset/images/blackIron@3x@2x.png'),
        brass: require('../../asset/images/brass@3x@2x.png'),
        silver: require('../../asset/images/silver@3x@2x.png'),
        gold: require('../../asset/images/gold@3x@2x.png'),
        platinum: require('../../asset/images/platinum@3x@2x.png')
      },
      post_name: '',
      post_name_list: {
        blackIron: '黑铁小白Lv.',
        brass: '青铜入门Lv.',
        silver: '白银进阶Lv.',
        gold: '黄金高手Lv.',
        platinum: '铂金达人Lv.',
        diamond: '钻石大师Lv.',
        starly: '星耀王者Lv.',
        epic: '史诗健将Lv.',
      },
      level: 0,
      // level_list: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17],
      percentage: 0,
      orderNo: '',
      light_and_shade_func: '',
      light_and_shade_service: '',
      light_and_shade_list: {
        light: require('../../asset/images/VIP@2x.png'),
        shade: require('../../asset/images/VIP1@2x.png')
      },
      is_has_func: '',
      is_has_service: '',
      userInfo: {
        mobileNo: "17681889620",
        userNo: "728a3c1d94a442a7b901d5277014f628"
      },
      score: 0
    }
  },
  /* computed: {
      ...mapGetters(['userInfo'])
    }, */
  created() {
    this.fetchUserDetail();
    this.fetchIntegralDetail();
  },
  methods: {
    back() {
        this.$router.go(-1);
      },
    goToMyGraden() {
      this.$router.push('./MyGraden')
    },
    fetchUserDetail() {
      const { userNo } = this.userInfo;
      selectBeeUser({ userNo }).then(({object}) => {
        this.memberInfo = object;
        console.log(this.memberInfo);
        /* Object.keys(this.memberInfo).forEach((key, index) => {
            console.log(key, this.memberInfo[key]);
        }); */
        this.days = this.$moment(this.$moment(this.memberInfo.createTime, "YYYYMMDD") - this.$moment().format("YYYYMMDD")).format("DD");
        // this.$store.dispatch("refreshUserInfo", this.userInfo);
        
      });
    },
    fetchIntegralDetail() {
      const { userNo } = this.userInfo;
      selectIntegralDetail({ userNo, begin: 0, rows: 9999 }).then(({ object }) => {
        console.log({ object });
        object.forEach((key, index) => {
          this.score += key.score;
        })
        // console.log(this.score);

        // 根据经验分值设置头牌和头衔
        // this.memberInfo.gradeNo未确定判断条件是否为gradeNo
        if(this.score >= 0 && this.score < 140) {
          this.level_img_src = this.level_img_src_list.blackIron;
          this.post_name = this.post_name_list.blackIron;
        }else if(this.score >= 140 && this.score < 500) {
          this.level_img_src = this.level_img_src_list.brass;
          this.post_name = this.post_name_list.brass;
        }else if(this.score >= 500 && this.score < 1100) {
          this.level_img_src = this.level_img_src_list.silver;
          this.post_name = this.post_name_list.silver;
        }else if(this.score >= 1100 && this.score < 3700) {
          this.level_img_src = this.level_img_src_list.gold;
          this.post_name = this.post_name_list.gold;
        }else if(this.score >= 3700) {
          this.level_img_src = this.level_img_src_list.platinum;
          this.post_name = this.post_name_list.platinum;
        }
        // 根据经验值设置level等级和升级进度条
        if(this.score >= 0 && this.score < 20) {
          this.level = 1;
          this.percentage = this.score / 20;
        }else if(this.score >= 20 && this.score < 70) {
          this.level = 2;
          this.percentage = this.score / 70;
        }else if(this.score >= 70 && this.score < 140) {
          this.level = 3;
          this.percentage = this.score / 140;
        }else if(this.score >= 140 && this.score < 200) {
          this.level = 4;
          this.percentage = this.score / 200;
        }else if(this.score >= 200 && this.score < 300) {
          this.level = 5;
          this.percentage = this.score / 300;
        }else if(this.score >= 300 && this.score < 500) {
          this.level = 6;
          this.percentage = this.score / 500;
        }else if(this.score >= 500 && this.score < 650) {
          this.level = 7;
          this.percentage = this.score / 650;
        }else if(this.score >= 650 && this.score < 850) {
          this.level = 8;
          this.percentage = this.score / 850;
        }else if(this.score >= 850 && this.score < 1100) {
          this.level = 9;
          this.percentage = this.score / 1100;
        }else if(this.score >= 1100 && this.score < 1600) {
          this.level = 10;
          this.percentage = this.score / 1600;
        }else if(this.score >= 1600 && this.score < 2200) {
          this.level = 11;
          this.percentage = this.score / 2200;
        }else if(this.score >= 2200 && this.score < 3000) {
          this.level = 12;
          this.percentage = this.score / 3000;
        }else if(this.score >= 3000 && this.score < 3700) {
          this.level = 13;
          this.percentage = this.score / 3700;
        }else if(this.score >= 3700 && this.score < 4500) {
          this.level = 14;
          this.percentage = this.score / 4500;
        }else if(this.score >= 4500 && this.score < 5500) {
          this.level = 15;
          this.percentage = this.score / 5500;
        }else if(this.score >= 5500 && this.score < 6500) {
          this.level = 16;
          this.percentage = this.score / 6500;
        }else if(this.score >= 6500) {
          this.level = 17;
          this.percentage = 0;
        }
        // console.log(this.percentage);
        // 根据level值设置vip图片颜色及功能说明
        if(this.level == 1) {
          this.light_and_shade_func = this.light_and_shade_list.shade;
          this.light_and_shade_service = this.light_and_shade_list.shade;
          this.is_has_func = '无';
          this.is_has_service = '无';
          this.orderNo = '1';
        }else if(this.level >= 2 && this.level <= 3) {
          this.light_and_shade_func = this.light_and_shade_list.light;
          this.light_and_shade_service = this.light_and_shade_list.shade;
          this.is_has_func = '有';
          this.is_has_service = '无';
          this.orderNo = '2';
        }else if(this.level >= 4 && this.level <= 6){
          this.light_and_shade_func = this.light_and_shade_list.light;
          this.light_and_shade_service = this.light_and_shade_list.light;
          this.is_has_func = '有';
          this.is_has_service = '有';
          this.orderNo = '3';
        }else{
          this.light_and_shade_func = this.light_and_shade_list.light;
          this.light_and_shade_service = this.light_and_shade_list.light;
          this.is_has_func = '有';
          this.is_has_service = '有';
          this.orderNo = '5';
        }

      }).catch((error) => {
        console.log(error);
      });
    }
  }
};
</script>
<style lang="less">
.gradencenter {
  //头部
  .header {
    width: 100%;
    height: 324px;
    background: -webkit-linear-gradient(left, #fac84f, #f29633);
    background: -o-linear-gradient(right, #fac84f, #f29633);
    background: -moz-linear-gradient(right, #fac84f, #f29633);
    background: linear-gradient(to right, #fac84f, #f29633);
    padding: 30px;
    .icon-fanhui {
      color: #fff;
      font-size: 36px;
    }
    .header_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:0 15px;
      padding-top: 30px;
      .image {
        width: 120px;
        height: 120px;
      }
      .header-text {
        font-size: 36px;
        color: #fff;
        width: 70%;
        .s2 {
          font-size: 24px;
        }
        .s3 {
          font-size: 26px;
        }
      }
      .icon-zhuyeerweima {
        font-size: 52px;
        color: #fff;
      }
    }
  }
  //中间 等级
  .content1_box {
    width: 690px;
    height: 456px;
    background: #fff;
    border-radius: 20px;
    margin-left: 30px;
    position: relative;
    bottom: 30px;
    .content1_box1 {
      display: flex;
      padding-top: 46px;
      padding-left: 30px;
      font-size: 26px;
      color: #333;
      align-items: center;
      .content1_box1_img {
        width: 46px;
        margin-right: 20px;
      }
    }
    .progress {
      padding:30px;
      .van-progress{
        height:14px;
      }
      .van-progress__portion{
       height:14px;
      }
      .van-progress__pivot {
        display: none;
      }
    }
    .vip_box{
      display: flex;
      justify-content:space-around;
      .vip_box_d{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size:24px;
        color:#999;
        line-height: 50px;
        .vip_box_img1{
          width:72px;
          height:96px;
        }
      }
    }
    .gradcenter{
      text-align: center;
      font-size:24px;
      color:#999;
    }
  }
  //我的评价
  .content2_box {
    margin-top:46px;
    padding-top: 40px;
    padding-left: 30px;
    font-size:32px;
    .content2_box2{
      display: flex;
      flex-direction: column;
      align-items: center;
      color:#333;
      .content2_box2_d1{
        font-size:30px;
      }
      .content2_box2_d2{
        font-size:77px;
        color:red;
        margin:20px 0px;
      }
      .content2_box2_d3{
        font-size:24px;
        display: flex;
        align-items: center;
        .content2_box2_d3_t{
          width:210px;
          color:#d4d4d4;
          margin:0 15px;
        }
      }
    }
    .btn_box{
      display: flex;
      justify-content: space-around;
      padding:30px;
       font-size: 24px;
      button{
        height:58px;
        border:1px solid #b2b2b2;
        background: none;
        border-radius: 50px;
        padding:0;
      }
      .btn_box_btn1{
        width:206px;
      }
      .btn_box_btn2{
        width:148px;
      }
      .btn_box_btn3{
        width:182px;
      }
    }
  }
}
</style>
